<template>
  <!-- 保存草稿对话框 -->
  <el-dialog
    v-model="visible"
    title="发布文章"
    class="dialog blur-background"
    center
    :modal="true"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :modal-append-to-body="true"
    :show-close="false"
  >
    <!-- 第一行, 文章标签 -->
    <div class="label">
      <span class="span-text">文章标签</span>
      <el-tooltip placement="top">
        <template #content>
          文章标签 <br />便于分类检索 <br />
          多个标签请用 '，' 分开</template
        >
        <span class="iconfont icon-wenhao-yuankuang"></span>
      </el-tooltip>
      <el-input v-model="labelValue" />
    </div>

    <!-- 第二行, 文章摘要 -->
    <div class="excerpt">
      <span class="span-text">文章摘要</span>
      <el-tooltip placement="top">
        <template #content> 文章摘要 <br />快速了解文章内容 </template>
        <span class="iconfont icon-wenhao-yuankuang"></span>
      </el-tooltip>
      <el-input
        v-model="textarea"
        maxlength="200"
        :autosize="{ minRows: 2, maxRows: 4 }"
        type="textarea"
        placeholder=""
        class="text-input"
      />
    </div>

    <!-- 第三行, 文章封面 -->
    <div class="cover">
      <span class="span-text">文章封面</span>
      <el-tooltip placement="top">
        <template #content>
          文章封面 <br />
          美化文章标题
        </template>
        <span class="iconfont icon-wenhao-yuankuang"></span>
      </el-tooltip>

      <!-- 自动生成和上传一张图片 imageUrl -->
      <el-upload
        class="avatar-uploader"
        action="http://localhost:8081/api/upload"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" :fit="fit" />
        <el-icon v-else class="icon iconfont icon-jiahao1">
          <Plus />
        </el-icon>
      </el-upload>

      <div class="third">
        <!-- 刷新 -->
        <div class="refresh" @click="refreshBtnClicked">
          <el-button>
            <span class="icon iconfont icon-shuaxin"></span>
          </el-button>
        </div>

        <!-- 网络图片链接 -->
        <!-- <div class="urlimage">
                     <el-input v-model="input1" placeholder="Please input">
                         <template #prepend>Http://</template>
                     </el-input>
                 </div> -->
      </div>
    </div>

    <!-- 文章分类 -->
    <div class="articleCate">
      <span class="span-text">文章分类</span>
      <el-tooltip placement="top">
        <template #content> 文章分类 <br />便于分类检索 </template>
        <span class="iconfont icon-wenhao-yuankuang"></span>
      </el-tooltip>
      <el-select
        v-model="articleCateValue"
        class="cateSelect"
        placeholder="Select"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>

    <!-- 是否原创 -->
    <div class="articleIsOriginal">
      <span class="span-text">是否原创</span>
      <el-tooltip placement="top">
        <template #content> 选择是否是原创文章 </template>
        <span class="iconfont icon-wenhao-yuankuang"></span>
      </el-tooltip>
      <div class="items">
        <el-radio-group v-model="radio" class="ml-4">
          <el-radio label="1">是</el-radio>
          <el-radio label="2">否</el-radio>
        </el-radio-group>
      </div>
    </div>

    <!-- 提交 取消 -->
    <div class="allbutton">
      <el-button type="primary" @click="publishArticle()">发布</el-button>
      <el-button type="primary" @click="visible = false">取消</el-button>
    </div>
  </el-dialog>
</template>
